import { memo } from 'react';
import type { FC, ReactNode } from 'react';
import { Button, Form, Input, Space, Typography, message } from 'antd';
import { UserAddOutlined } from '@ant-design/icons';
import styles from './Register.module.scss';
import { Link, useNavigate } from 'react-router-dom';
import { LOGIN_PATH } from '@/router';
import { register } from '@/services/user';
import { useRequest } from 'ahooks';

interface IProps {
  children?: ReactNode;
}
const { Title } = Typography;

const Register: FC<IProps> = () => {
  const navigate = useNavigate();
  const { run } = useRequest(
    async (values: any) => {
      const { username, password, nickname } = values;
      await register(username, password, nickname);
    },
    {
      manual: true,
      onSuccess: () => {
        message.success('注册成功');
        navigate(LOGIN_PATH);
      },
    }
  );

  const onFinish = (values: any) => {
    run(values);
  };
  return (
    <>
      <div className={styles.container}>
        <Space>
          <Title>
            <UserAddOutlined />
          </Title>
          <Title level={2}>注册</Title>
        </Space>
        <Form
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              { required: true, message: '请输入用户名' },
              {
                type: 'string',
                min: 6,
                max: 20,
                message: '用户名长度在6-20个字符',
              },
              {
                pattern: /^[a-zA-Z0-9_]+$/,
                message: '用户名只能包含字母、数字和下划线',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            dependencies={['password']}
            rules={[
              { required: true, message: '请输入密码' },
              {
                type: 'string',
                min: 6,
                max: 20,
                message: '密码长度在6-20个字符',
              },
              {
                pattern: /^[a-zA-Z0-9_]+$/,
                message: '密码只能包含字母、数字和下划线',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="确认密码"
            name="confirmPassword"
            rules={[
              { required: true, message: '请确认密码' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('密码不一致'));
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item label="昵称" name="nickname">
            <Input />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                注册
              </Button>
              <Link to={LOGIN_PATH}>已有账号？登录</Link>
            </Space>
          </Form.Item>
        </Form>
      </div>
    </>
  );
};

export default memo(Register);
